<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>

<style>
.title-blue
{
	color:			#466F93;
	font-weight:	bold;
	font-family:	verdana,arial,sans serif;
	line-height:	16px;
	font-size:		12px;
}



</style>


<script type="text/javascript" src="lib/dragdrop.js"></script>

<!-- Carregar somente para o administrador -->
<script type="text/javascript" src="lib/observer.js"></script>
</head>


<body>

<!-- MENU -->
<div id="logo" style="top:200px;" >
<!--div id="barmenu" style="top:-17px; left:-3px; height:20px; width:115%; background-image:url(img/white-top-bottom.gif)" onmousedown="addEvent(document.getElementById('logo'), 'move'); document.getElementById('fixmodify').src='img/fix_modify_enable.gif';" ></div>

	<div style="position:absolute; top:-15px; left:10%;"><span id="title" class="title-blue">logo</span></div>

	<div style="position:absolute; top:-14px; left:90%">	
		<img id="fixmodify" src="img/fix_modify_enable.gif" width="14" height="16" onmousedown="this.src='img/fix_modify_disable.gif'"/>	</div-->
	

	<img src="logo.gif" id="logoimg" align="bottom"/>
</div>


<div id="menu" style="top:0px; left:20px; height:20px; width:80%; cursor:default"  onmousedown="addEvent(this, 'move')"> MENU 
</div>				


<div id="left" style="top:25px; width:200px; left:10px; background-color:#f0f2f4"  onmouseout="document.getElementById('result').innerHTML = 'Mouse OUT';" onmousedown="addEvent(this, 'resize')">  LEFT </div>		
			
<div id="top" style="top: 25px; width:559px; left:220px; background-color:#f0f2f4" onmousedown="addEvent(this, 'move')">
 TOP 

 <span id="bottom">  BOTTOM </span>

 </div>			

<div id="right" style="top:25px; width:200px; left:788px; background-color:#f0f2f4"  onmousedown="grab(this)">  RIGHT </div>


<div id="right" style="top:250px; width:150px; left:230px"  onmousedown="grab(this)"> 
	<span id="result" style="">RESULT</span> 
</div>

<script>
// Criar a barra de menu para cada DIV de modo dinamico

function createElement(object, elem, attrib, param, html, func){
	 var newdiv = document.createElement(elem);
	 newdiv.setAttribute('id', "barmenu");
//	 newdiv.style = ["top:-17px","left:-3px","height:20px","width:115%","background-image:url(img/white-top-bottom.gif)"]
	 newdiv.cssText = param;

	 if(param != null){
		 for(var i=0; i<param.length; i++){
			 newdiv.style[param[i].substring(0,param[i].indexOf(":"))] = param[i].substring(param[i].indexOf(":")+1, param[i].length); 
		 }
	 }
	 if(object.style.width.replace("px","") != "")
		 newdiv.style.width  = (object.style.width.replace("px","") + 10) + "px"; 
	
	 if(attrib != null)
		 for(var i=0; i<attrib.length; i++){
			 newdiv[attrib[i].substring(0,attrib[i].indexOf(":"))] = attrib[i].substring(attrib[i].indexOf(":")+1, attrib[i].length); 
		 }
	 newdiv.onmousedown = func;
	 newdiv.innerHTML = html;
	 object.appendChild(newdiv);
	 return newdiv;
}


var nodeLogo = document.getElementById('logo');
var html;
	createElement(nodeLogo, 'div', null, ["top:-17px","left:-5px","height:20px", "width:115%","backgroundImage:url(img/white-top-bottom.gif)"], "", function() {
					addEvent(nodeLogo, 'move'); 
					document.getElementById('fixmodify').src='img/fix_modify_enable.gif';
				 }  );

	html = "<span id='title' class='title-blue'>logo</span>";
	createElement(nodeLogo, 'div', null, ["position:absolute","top:-15px","left:10%"], html, null  );

	html = "<img id='fixmodify' src='img/fix_modify_enable.gif' width='14' height='16' onmousedown='this.src=\"img/fix_modify_disable.gif\"'/>";
	createElement(nodeLogo, 'div', null, ["position:absolute","top:-14px","left:90%"], html, null  );


	var node = createElement(nodeLogo, 'img', ["src:'logo.gif'"], null, html, null  );
	nodeLogo.appendChild(node);
//	<img src="logo.gif" id="logoimg" align="bottom"/>
//	createElement(nodeLogo, 'div', ["position:absolute","top:-14px","left:90%"], html, null  );


</script>

<script>

function test(){
	document.getElementById("left").innerHTML = "<br>LEFT<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>A<br>";
	document.getElementById("right").innerHTML = "<center>RIGHT<center>";
	document.getElementById("top").innerHTML = "<center>TOP<center>";
//	document.getElementById("bottom").innerHTML = "<center>BOTTOM<center>";
	document.getElementById("menu").innerHTML = "<center>MENU<center>";
}

test();




</script>

<!--script>
/*
    * Publishers are in charge of "publishing" eg: Creating the Event
    * They're also in charge of "notifying" (firing the event)
*/
var o = new Observer;
o.fire('here is my data');

/*
    * Subscribers basically... "subscribe" (or listen)
    * And once they've been "notified" their callback functions are invoked
*/
var fn = function() {
    // my callback stuff
};
o.subscribe(fn);

/*
    * Don't want to subscribe anymore?
*/
o.unsubscribe(fn);
</script-->


</body>

</html>
